<template>
    <div class='tag' flex="cross:center" flex-wrap>
        <div
            class="tag-item"
            flex="cross:center main:center"
            v-for="(item,index) in tagData"
            :key="index">{{item}}</div>
    </div>
</template>

<script>
    export default {
        name: "colorTag",
        props: {
            tags:{
                type:String,
                default:''
            }
        },
        data() {
            return {

            }
        },
        created() {
        },
        mounted() {
        },
        computed: {
            tagData(){
                if(!this.tags)return[];
                console.log('data>>>',)
                return this.tags.split(',');
            }
        },
        methods: {},
    }
</script>
<style scoped lang='scss'>
.tag{
    width: 100%;
    @media screen and (min-width:960px) and (max-width:1920px){
        &-item{
            min-width: 72px;
            @include fontBase(14px,#666666);
            padding: 3px 10px;
            margin-right: 12px;
            margin-bottom: 12px;
            border-radius: 12px;
            box-shadow: 2px 2px 5px #eeeeee;
            position: relative;
            overflow: hidden;
            transition: all .5s ease-in;
            background: transparent;
            &:before {
                transition: all 0.5s cubic-bezier(0.7, -0.5, 0.2, 2);
                content: '';
                width: 0%;
                height: 100%;
                background: #007AFF;
                position: absolute;
                top: 0;
                left: 0;
                z-index: -1;
            }
            &:hover:before {
                background: #007AFF;
                width: 100%;
            }
            &:hover{
                color: #ffffff;
            }
        }
    }
    @media screen and (max-width:959px){
        &-item{
            min-width: .853rem;
            @include fontBase(0.28rem,#666666);
            padding: .06rem .24rem;
            margin-right: .24rem;
            margin-bottom: .24rem;
            border-radius: .18rem;
            box-shadow: 2px 2px 5px #eeeeee;
        }
    }

}
</style>
